<template>
  <div>
    <div class="list_img">
      <img :src="this.$route.params.items.mainPic" alt />
    </div>
    <div class="list_class_class">
      <div style="color:red;" class="list_item_class">￥{{this.$route.params.items.originalPrice}}</div>
      <div class="list_favorite">
        <span class="list_favorite1">降价提醒</span>
        <span class="list_favorite2">收藏</span>
      </div>
    </div>
    <div class="list_name_title">{{this.$route.params.items.title}}</div>
    <div class="list_name_name">{{this.$route.params.items.desc}}</div>
    <div class="list_name_mainPic">{{this.$route.params.items.desc}}</div>
    <div class="list_name_dtitle">{{this.$route.params.items.dtitle}}</div>
    <div class="list_button">
      <div>客服</div>
      <div>店铺</div>
      <div>购物车</div>
      <div>
        <button class="list_button_list_button" v-on:click="affirm">加入购物车</button>
      </div>
      <div>
        <button class="list_button_list_button1">立即购买</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    affirm() {
      var temp = JSON.parse(localStorage.getItem("cart"));
      if (temp == null) {
        temp = [];
      }
      var flag = temp.some(ele => {
        if (ele.id === this.$route.params.items.id) {
          ele.count += 1;
          return true;
        }
      });
      if (!flag) {
        this.$route.params.items.count = 1;
        this.$route.params.items.checked = false;
        temp.push(this.$route.params.items);
      }
      window.console.log(temp);
      localStorage.setItem("cart", JSON.stringify(temp));
    }
  }
};
</script>
<style scoped>
.list_img img {
  height: 40%;
  width: 100%;
}
.list_favorite {
  color: gray;
}
.list_favorite1 {
  height: 40px;
  width: 40px;
  font-size: 12px;
  border: 1px solid gray;
  border-radius: 50%;
  margin-left: 195px;
}
.list_favorite2 {
  height: 40px;
  width: 40px;
  font-size: 12px;
  border: 1px solid gray;
  border-radius: 50%;
  margin-left: 15px;
}
.list_class_class {
  width: 100%;
  display: inline-flex;
  align-content: space-around;
  align-items: center;
}
.list_item_class {
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
}
.list_name_title {
  font-weight: 600;
  /* font-size: 18px; */
  margin-top: 20px;
}
.list_button {
  height: 64px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  width: 100%;
  display: inline-flex;
  /* margin-left: 220px; */
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0px;
  font-size: 13px;
}
.list_button_list_button {
  height: 35px;
  border-radius: 5px;
  border: none;
  background-color: black;
  color: white;
  font-weight: 600;
  width: 90px;
}
.list_button_list_button1 {
  width: 90px;
  height: 35px;
  border-radius: 5px;
  border: none;
  background-color: black;
  color: white;
  font-weight: 600;
}
.list_name_name {
  font-size: 12px;
  color: gray;
  margin-top: 10px;
}
.list_name_mainPic {
  margin-top: 10px;
  color: #ffc60d;
}
.list_name_dtitle {
  margin-top: 10px;
  color: skyblue;
}
.list_name_couponLink {
  margin-top: 10px;
  color: aqua;
}
</style>